
// 导入 axios 库
import axios from 'axios';
// 导入 Hook : useState 、useEffect
import { useState, useEffect } from 'react';
// 导入 Hook : useNavigate
import { useNavigate } from 'react-router-dom';
// 导入 Ant Design 组件
import { Popconfirm, Space, Table , notification, Button } from 'antd';

function LoongListView(){

    const navigate = useNavigate();

    // 定义一个名称为 `loongs` 变量并定义了修改该变量的方法`setLoongs`
    const [loongs,setLoongs] = useState(null);

    // 定义用来控制分页的状态数据
    const [pagingOptions,setPagingOptions] = useState({
        // 设置表格中分页组件的显示位置
        position: [ 'bottomCenter' ],
        // 设置分页组件默认显示的页码
        defaultCurrent: 1,
        // 设置分页组件每页默认显示的行数(最大行数)
        defaultPageSize: 5,
        // 用于控制每页实际显示的最大行数
        pageSize: 5,
        // 指定每页可以显示多少条
        pageSizeOptions: [ 1, 2, 5, 10, 20, 50, 100 ],
        // 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
        showSizeChanger: true,
        // 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
        onChange: (page,pageSize) => {
            // console.log( 'page: ' , page , ' , pageSize: ' , pageSize );
            setPagingOptions( { ...pagingOptions , pageSize: pageSize } )
        }
    });

    // 用于弹出`通知提醒框`的函数
    const openNotification = (title,desc) => {
      notification.open({
        message: title,
        description: desc
      });
    };

    // 用于获取列表数据的函数
    const fetchData = () => {
        const promise = axios.get( '/back/loong/list' );
        promise.then( resp => {
            let data = resp.data ;
            if( data.success ) {
                let array = data.result ;
                // 为 array 中每个 loong 添加 key 属性
                array = array.map( x => {
                    let y = { ...x };
                    y.key = String( y.id );
                    return y;
                });
                // 通过 setLoongs 函数来修改组件的状态
                setLoongs( array );
                return;
            }
            // 查询失败
            console.log( data.message , data.result );
        }).catch( cause => {
            console.log( cause );
        });
    }

    // 执行副作用操作
    // Similar to componentDidMount and componentDidUpdate:
    useEffect( fetchData , [] );

    const removeData = id => {
        const url = `/back/loong/remove/${id}`;
        axios.delete(url).then( resp => {
            const { success , message , result } = resp.data ;
            if( success ) {
                openNotification( message , `你已经成功删除${result}条数据` );
                // 重新加载列表
                fetchData();
                return ;
            }
        }).catch( cause => {
            console.log( cause );
        })
    }

    const columns = [
        // title 用于指定表格中各个列的标题
        // dataIndex 用于指定当前列中所显示的数据取自 dataSource 中所包含对象的哪个属性
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '性别', dataIndex: 'gender', key: 'gender' , render: g => g === 'female' ? '靓妹' : '靓仔' },
        { title: '出生日期', dataIndex: 'birthdate', key: 'birthdate' },
        { title: '籍贯', dataIndex: 'hometown', key: 'hometown' },
        { 
            title: '操作', 
            dataIndex: 'id', 
            key: 'action' ,
            render: id => (
                <Space>
                    <Popconfirm title="你确定要修改吗?" 
                                okText="确定"
                                cancelText="取消"
                                onConfirm={ () => navigate( `/function/edit/${id}` ) }>
                        <Button type="primary" size="small">修改</Button>
                    </Popconfirm>
                    <Popconfirm title="是否确定删除当前数据" 
                                okText="确定"
                                cancelText="取消"
                                onConfirm={ () => removeData( id ) }>
                        <Button type="primary" size="small">删除</Button>
                    </Popconfirm>
                </Space>
            ) 
        }
    ];

    // dataSource 对应的 loongs 数组中每个对象包含的属性有:
    // id , name , gender , birthdate , hometown , key

    return (
        <Table columns={ columns } 
               dataSource={ loongs } 
               pagination={ pagingOptions }/>
    )
}

export default LoongListView;